<template>
    <el-card class="infoContainer" shadow="always" :body-style="{ padding: '20px'}">
        <!-- 个人资料的头部 -->
        <div class="header">
            <img class="headerImg" :src="centerStore.userInfo.avatar">
            <div class="headerWord">点击更换</div>
        </div>
        <!-- 个人资料的信息部分 -->
        <div class="middle">
            <!-- 左侧 -->
            <ul class="leftInfo">
                <li>
                    <span> 用户名 :</span>
                    <!-- <input type="text" v-model="info.account"> -->
                    <el-input class="infoInput" v-model="info.account" maxlength="11" show-word-limit type="text" />
                </li>
                <li>
                    <span>性别:</span>
                    <!-- {{sex === 'm' ? '男' : '女'}} -->
                    <el-button :class="{active: sex === 'm'}" size="default" @click="changeSex">男</el-button>
                    <el-button :class="{active: sex === 'f'}" size="default" @click="changeSex">女</el-button>
                </li>
                <li class="level">
                    <span>成长等级 :</span>
                    <div class="lv">Lv.{{centerStore.userInfo.level}}</div>
                </li>
            </ul>
            <!-- 右侧 -->
            <ul class="leftInfo infoRightStyle">
                <li>
                    <span> 生日 :</span>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="default"
                                props="{expandTrigger:hover}" />
                        </div>
                    </div>
                </li>
                <li>
                    <span>城市:</span>
                    <!-- 级联选择器 -->
                    <div class="example-block">
                        <el-cascader v-model="value" :options="options" />
                    </div>
                </li>
                <li>
                    <span>技能水平 :</span>
                    <el-select v-model="skillValue" placeholder="请选择">
                        <el-option class="skillSelect" :label="skill.data.name" :value="index+1"
                            v-for="(skill,index) in centerStore.skillLevel" :key="skill.id">
                            <span class="skillOne">{{skill.data.name}}</span>
                            <span class="skillTwo">{{skill.data.desc}}</span>
                        </el-option>
                    </el-select>
                    <el-icon class="infoIcon" @click="centerDialogVisible = true">
                        <InfoFilled />
                    </el-icon>
                </li>
            </ul>
            <!-- 点击图标显示的dialog -->
            <el-dialog v-model="centerDialogVisible" title="技能水平" width="25%" align-center>
                <span>平台将根据你选择的技能水平，优先智能推荐相应内容。</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 底部 :兴趣技能-->
            <div class="leftInfo hobbySkill">
                <span> 兴趣技能 :</span>
                <span class="skillTag" v-for="(skill,index) in recommendStore.checkedHobbies" :key="skill.id">
                    <el-tag size="large">{{skill.name}}</el-tag>
                    <svg t="1666174940367" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2236" width="20" height="20"
                        @click="deleteHobby(index)">
                        <path
                            d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-572.330667L300.629333 240.213333a42.538667 42.538667 0 0 0-60.16 0.213334 42.410667 42.410667 0 0 0-0.213333 60.16L451.669333 512 240.213333 723.370667a42.538667 42.538667 0 0 0 0.213334 60.16 42.410667 42.410667 0 0 0 60.16 0.213333L512 572.330667l211.370667 211.413333a42.538667 42.538667 0 0 0 60.16-0.213333 42.410667 42.410667 0 0 0 0.213333-60.16L572.330667 512l211.413333-211.370667a42.538667 42.538667 0 0 0-0.213333-60.16 42.410667 42.410667 0 0 0-60.16-0.213333L512 451.669333z"
                            fill="#ff0000" p-id="2237"></path>
                    </svg>
                </span>
                <el-button class="selectButton" size="default" @click="selectHobby">请选择</el-button>
                <Hobbies ref="hobbiesRef" />
            </div>
            <!-- 保存按钮 -->
            <div class="infoSave">
                <el-button class="save" type="primary" size="default" @click="saveInfo">保存</el-button>
            </div>
        </div>
    </el-card>

</template>

<script setup lang="ts">
// 引入moment
import moment from 'moment'
import { ref, onMounted, watch, reactive } from 'vue'
// 引入兴趣爱好组件
import Hobbies from '@/components/hobbies/index.vue'
import bus from '../../../bus/index'
// 引入请求
import { reqInforMationSave } from '../../../api/center/index'
// 引入仓库
import useCenterStore from '../../../stores/center'
import useRecommendStore from '../../../stores/recommend'
// 创建子仓库
let centerStore = useCenterStore()
let recommendStore = useRecommendStore()
// 级联选择器,城市的变量
const value = ref([])
// 城市的数据
const options = [
    {
        value: '安徽',
        label: '安徽',
        children: [
            {
                value: '安庆',
                label: '安庆',
            },
            {
                value: '蚌埠',
                label: '蚌埠',
            },
            {
                value: '池州',
                label: '池州',
            },
            {
                value: '阜阳',
                label: '阜阳',
            },
            {
                value: '黄山',
                label: '黄山',
            },
            {
                value: '合肥',
                label: '合肥',
            },
            {
                value: '淮南',
                label: '淮南',
            },
            {
                value: '淮北',
                label: '淮北',
            },
            {
                value: '六安',
                label: '六安',
            },
            {
                value: '马鞍山',
                label: '马鞍山',
            },
            {
                value: '宿州',
                label: '宿州',
            },
            {
                value: '铜陵',
                label: '铜陵',
            },
            {
                value: '芜湖',
                label: '芜湖',
            },
            {
                value: '宣城',
                label: '宣城',
            },
            {
                value: '亳州',
                label: '亳州',
            },
        ],
    },
    {
        value: '北京',
        label: '北京',
        children: [
            {
                value: '北京',
                label: '北京',
            },
        ],
    },
    {
        value: '重庆',
        label: '重庆',
        children: [
            {
                value: '重庆',
                label: '重庆',
            },
        ],
    },
    {
        value: '福建',
        label: '福建',
        children: [
            {
                value: '福州',
                label: '福州',
            },
            {
                value: '龙岩',
                label: '龙岩',
            },
            {
                value: '宁德',
                label: '宁德',
            },
            {
                value: '南平',
                label: '南平',
            },
            {
                value: '泉州',
                label: '泉州',
            },
            {
                value: '三明',
                label: '三明',
            },
            {
                value: '厦门',
                label: '厦门',
            },
            {
                value: '漳州',
                label: '漳州',
            },
        ],
    },
    {
        value: '甘肃',
        label: '甘肃',
        children: [
            {
                value: '白银',
                label: '白银',
            },
            {
                value: '定西',
                label: '定西',
            },
            {
                value: '甘南',
                label: '甘南',
            },
            {
                value: '嘉峪关',
                label: '嘉峪关',
            },
            {
                value: '金昌',
                label: '金昌',
            },

            {
                value: '酒泉',
                label: '酒泉',
            },

            {
                value: '陇南',
                label: '陇南',
            },
            {
                value: '临夏',
                label: '临夏',
            },
            {
                value: '兰州',
                label: '兰州',
            },
            {
                value: '平凉',
                label: '平凉',
            },
            {
                value: '张掖',
                label: '张掖',
            },

        ],
    },
    {
        value: '广东',
        label: '广东',
        children: [
            {
                value: '广州',
                label: '广州',
            },
            {
                value: '佛山',
                label: '佛山',
            },
            {
                value: '珠海',
                label: '珠海',
            },
        ],
    },
    {
        value: '广西',
        label: '广西',
        children: [
            {
                value: '北海',
                label: '北海',
            },
            {
                value: '百色',
                label: '百色',
            },
            {
                value: '崇左',
                label: '崇左',
            },
            {
                value: '防城港',
                label: '防城港',
            },
            {
                value: '桂林',
                label: '桂林',
            },
            {
                value: '贵港',
                label: '贵港',
            },

            {
                value: '河池',
                label: '河池',
            },

            {
                value: '贺州',
                label: '贺州',
            },
            {
                value: '柳州',
                label: '柳州',
            },
            {
                value: '来宾',
                label: '来宾',
            },

            {
                value: '南宁',
                label: '南宁',
            },
            {
                value: '钦州',
                label: '钦州',
            },
            {
                value: '玉林',
                label: '玉林',
            },
        ],
    },
    {
        value: '贵州',
        label: '贵州',
        children: [
            {
                value: '安顺',
                label: '安顺',
            },
            {
                value: '毕节',
                label: '毕节',
            },
            {
                value: '贵阳',
                label: '贵阳',
            },
            {
                value: '六盘水',
                label: '六盘水',
            },
        ],
    },
    {
        value: '海南',
        label: '海南',
        children: [
            {
                value: '海口',
                label: '海口',
            },
            {
                value: '三亚',
                label: '三亚',
            },

        ],
    },
    {
        value: '河北',
        label: '河北',
        children: [
            {
                value: '保定',
                label: '保定',
            },
            {
                value: '张家口',
                label: '张家口',
            },
            {
                value: '石家庄',
                label: '石家庄',
            },
            {
                value: '邯郸',
                label: '邯郸',
            },
        ],
    },
    {
        value: '黑龙江',
        label: '黑龙江',
        children: [
            {
                value: '大庆',
                label: '大庆',
            },
            {
                value: '佳木斯',
                label: '佳木斯',
            },
            {
                value: '牡丹江',
                label: '牡丹江',
            },
            {
                value: '哈尔滨',
                label: '哈尔滨',
            },
        ],
    },
    {
        value: '河南',
        label: '河南',
        children: [
            {
                value: '安阳',
                label: '安阳',
            },
        ],
    },
    {
        value: '湖北',
        label: '湖北',
        children: [
            {
                value: '恩施',
                label: '恩施',
            },
            {
                value: '黄石',
                label: '黄石',
            },
        ],
    },
    {
        value: '黑龙江',
        label: '黑龙江',
        children: [
            {
                value: '大庆',
                label: '大庆',
            },
            {
                value: '佳木斯',
                label: '佳木斯',
            },
            {
                value: '牡丹江',
                label: '牡丹江',
            },
            {
                value: '哈尔滨',
                label: '哈尔滨',
            },
        ],
    },


]

// 时间选择器代码
let value1 = ref<number>()
// 存储兴趣爱好组件实例
let hobbiesRef = ref()
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
// 选择器的数据
const skillValue = ref('')
// 性别的变量
let sex = ref<string>('')
// 个人用户信息
const info = reactive({
    // avatar :'',
    // 用户名
    // account: "",
    // { groupType: "avocation", name: "街舞", id: "402881ed649d628e01649d636ea60056" }
    avocation: [],
    channel: {},
    moreBackup: {
        skillLevel: 30,
        birthDate: "",
        sex: "m",
        skillLevelName: "",
        // city: "402881bb60f8eae00160f8eb01eb0221"
        city: ""
    }
    // moreBackup:{
    //     avatar: "http://rs.dance365.com/photo/0cd7306b6a6b47e49a0469045986c060_rs_dd99373ccb8d4578a9135bfbe8bea3c7",
    //     avocation: [{groupType: "avocation", name: "民族舞", id: "402881ed649d628e01649d636ea7005a"}],
    //    channel: {id: "DanceChannel", name: "舞蹈", groupType: "channel"}
    // }


});


// 页面加载的时候
onMounted(() => {
    // 更新用户名
    getInfo(),
        centerStore.getSkillLevel('skill_level')
    // userName.value = centerStore.userInfo.account

})

// 发请求获取数据
const getInfo = async () => {
    try {
        await centerStore.getUserInfo();
        // console.log("123213");
        // 用户名
        info.account = centerStore.userInfo.account;
        // 用户关注的舞蹈类型
        info.avocation = centerStore.userInfo.avocation;
        // 
        info.channel = centerStore.userInfo.channel;
        info.moreBackup = centerStore.userInfo.moreBackup;
        // 时间选择器的数据
        value1.value = moment(new Date(centerStore.userInfo.moreBackup.birthDate)).format('YYYY/MM/DD')
        // 技能水平的数据
        skillValue.value = centerStore.userInfo.moreBackup.skillLevelName
        // 城市的数据
        value.value = centerStore.userInfo.moreBackup.address.split(' ')
        // 性别的数据
        sex.value = centerStore.userInfo.moreBackup.sex
    } catch (error) {

    }

}
// 性别的点击事件
const changeSex = () => {
    if (sex.value === 'f') {
        sex.value = 'm'
    } else {
        sex.value = 'f'
    }
}
// 图标的点击事件
const centerDialogVisible = ref(false)
// 删除爱好的回调
const deleteHobby = (index: any) => {
    // console.log(111);
    recommendStore.checkedHobbies.splice(index, 1)

}

// 请选择按钮的单击回调
const selectHobby = () => {
    bus.emit('show', true)
    // 调用子组件的函数
    hobbiesRef.value.getHobbiesInit()
    hobbiesRef.value.addHobby()


}
// 保存按钮的回调
const saveInfo = async (info:any) => {
    // 整理参数
    info.avocation = centerStore.userInfo.avocation
    info.channel = centerStore.userInfo.channel;
    info.moreBackup = centerStore.userInfo.moreBackup;
  let result =  await reqInforMationSave(info)
  console.log(result);
  
}


</script>

<style scoped>
.infoContainer {
    min-height: 630px;
    padding-top: 60px;
}

/* 头部放头像 */
.header {
    height: 140px;

}

.headerImg {
    height: 120px;
    width: 120px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.headerImg:hover {
    border: 2px solid #f8bed5;
    /* box-shadow:5px 5px 10px 5px black outset; */
}

.headerWord {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    color: #7D8090;
    font-size: 14px;
    /* margin: 10px; */
}

/* 中间部分 */
.middle {
    width: 100%;
    margin: 20px 140px;
    position: relative;
    padding: 20px 0;
}

.leftInfo {
    /* float: left; */
    margin-left: 40px;
    margin-right: 60px;

}

.middle ul li {
    width: 340px;
    height: 58px;
}

/* 左侧部分 */
.leftInfo li span {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    /* text-align: left; */
    font-size: 13px;


}

.leftInfo li .infoInput {
    height: 40px;
    width: 160px;
    background-color: #f5f7f9;
    border-style: none;
    border: none;
}

.leftInfo li button {
    width: 70px;
    height: 30px;
    background-color: #f5f7f9;
    border-style: none;
    color: #000;
    margin-right: 10px;

}

.leftInfo li button.active {
    background-color: #f93684;
    color: #fff
}

/* level的样式 */
.level {
    position: relative;
}

.lv {
    /* display: inline; */
    height: 20px;
    width: 41px;
    background-color: #ff43d0;
    margin: 0 auto;
    border-radius: 4px;
    text-align: center;
    margin-top: 5px;
    font-style: oblique;
    font-weight: 600;
    font-size: 12px;
    color: white;
    line-height: 20px;
    position: absolute;
    top: 5px;
    left: 85px;

}

/* 右侧部分 */
.infoRightStyle {
    position: absolute;
    left: 330px;
    top: 20px;
}

/* 时间选择器 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    position: absolute;
    top: -25px;
    left: 22px;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

/* 技能水平选择器的样式 */
.skillOne {
    font-size: 14px;
}

.skillTwo {
    display: inline-block;
    /* float: right; */
    margin-left: 10px;
    font-size: 12px;

}

/* 技能水平后面的图标 */
.infoIcon {
    margin: 3px 10px;
}

/* 兴趣技能 */
.leftInfo.hobbySkill {
    width: 800px;
}

/* tag标签的样式 */
.leftInfo.hobbySkill span {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
}

.leftInfo.hobbySkill .skillTag {
    position: relative;
    width: 100px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    /* margin: 0 10px; */
    margin-left: 22px;
}

.skillTag svg {
    position: absolute;
    top: -20px;
    right: -4px;
}

/* 兴趣技能的请选择按钮 */
.hobbySkill .selectButton {
    height: 35px;
    width: 80px;
    font-size: 14px;
    color: #bbbfc9;
    border-radius: 5px;
    border: none;
    margin: 0 10px;
    background-color: #f5f7f9;
}

/* 保存按钮 */
.save {
    background-color: #f93684;
    margin: 30px 270px 0;
    width: 140px;
    height: 46px;
    border: none;
    font-size: 12px;
    color: #fff;
}


.example-block {
    margin: -40px 81px;
    width: 220px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.dialog-footer button {
    background-color: #f93684;
    border: none;
}
</style>